<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>仪器列表</title>
<link href="${base}/devices/admin/css/base.css" rel="stylesheet" type="text/css" />
<link href="${base}/devices/admin/css/admin.css" rel="stylesheet" type="text/css" />
<link href="${base}/devices/admin/css/jqModal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${base}/devices/common/js/jquery.js"></script>
<script type="text/javascript" src="${base}/devices/common/js/jquery.jqModal.js"></script>
<script type="text/javascript" src="${base}/devices/common/js/jquery.jqDnR.js"></script>
<script type="text/javascript" src="${base}/devices/common/js/jquery.dimensions.js"></script>


<script type="text/javascript" src="${base}/devices/date97/WdatePicker.js"></script>
<script type="text/javascript">
//格式化时间
Date.prototype.format = function(format)
{
    var o =
    {
        "M+" : this.getMonth()+1, //month
        "d+" : this.getDate(),    //day
        "h+" : this.getHours(),   //hour
        "m+" : this.getMinutes(), //minute
        "s+" : this.getSeconds(), //second
        "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
        "S" : this.getMilliseconds() //millisecond
    }
    if(/(y+)/.test(format))
    format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)
    if(new RegExp("("+ k +")").test(format))
    format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
    return format;
};

	var instrumentId;
	function init(id){
		var dd=new Date();
		instrumentId = id;
		appointmentCalendar(dd.format('yyyy-MM-dd 00:00:00'),id);
	}

$(function($) {



	//弹出框
	$('#dialog').jqm({
		trigger: '#ex3aTrigger',
		overlay: 50, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
		overlayClass: 'whiteOverlay'
		})
		
		
		
    .jqDrag('.jqDrag'); //拖拽
  
	// Close Button Highlighting. IE doesn't support :hover. Surprise?
	$('input.jqmdX')
		.hover(
			function(){ $(this).addClass('jqmdXFocus'); }, 
			function(){ $(this).removeClass('jqmdXFocus'); }
		)
		.focus( 
			function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); }
		)
		.blur(
			function(){ $(this).removeClass('jqmdXFocus'); }
		);
	


	$('#yyendHour').change(function(){
		var yystartDate = $("#yystartDate").val();
		var yyendDate = $("#yyendDate").val();
		var yystartHour = $("#yystartHour").val();
		var yyendHour = $("#yyendHour").val();
		var startTime = yystartDate+" "+yystartHour+":00:00";
		var endTime = yyendDate+" "+yyendHour+":00:00";
		if(yystartDate != '' && yyendDate != '' && yystartHour != '' && yyendHour != '')
		{
			var startDate = new Date(startTime.replace(/\-/g, "\/"));
			var endDate = new Date(endTime.replace(/\-/g, "\/"));
			var totalTime = (endDate.getTime()-startDate.getTime())/(1000*60*60);
			if(totalTime < 0)
			{
				alert('预约结束时间必须大于开始时间！');
				$("#totalTime").html("0小时");
			}
			else
			{
				$("#totalTime").html(totalTime+"小时");
				var costType = $("#costType").val();
			    if(costType==1)
				{
					var cbt=$('#costbytime').val();
					$("#totalMoney").html(cbt*totalTime+"元");
				}
			}
		}
		else
		{
			$("#totalTime").html("0小时");
		}
    });
    
    
	$('#costType').change(function(){
		var costType = $("#costType").val();
		if(costType==2)
		{
			$('#sampleCount').show();
		}
		else
		{
			$('#sampleCount').hide();
			$('#sampleCount').attr("value","");
	    }
    });
    
    
	$('#inputsampleCount').keyup(function(){
	    if(!isNaN($(this).val()))
	    {
	         var cbc=$('#costbycount').val();
	         var total=$(this).val();
	         $("#totalMoney").html(cbc*total+"元");
	    }
	    else
	       alert("请输入数字！");
    });
    
    

	var $deleteDeviceInfoButton = $("#listTable .deleteDeviceInfoButton");
	
	// 删除仪器信息
	$deleteDeviceInfoButton.click( function() {
		if (confirm("您确定要删除此仪器信息吗?") == false) {
			return false;
		}
	});

	$("#wyyy_content_left_text03_reset").on("click", function(event){
		var xxstartDate = $("#yystartDate").val();
		var xxendDate = $("#yyendDate").val();
		var xxstartHour = $("#yystartHour").val();
		var xxendHour = $("#yyendHour").val();
		var sstartTime = xxstartDate+" "+xxstartHour+":00:00";
		var sendTime = xxendDate+" "+xxendHour+":00:00";
		if(xxstartDate != '' && xxendDate != '' && xxstartHour != '' && xxendHour != '')
		{
			var startDate = new Date(sstartTime.replace(/\-/g, "\/"));
			var endDate = new Date(sendTime.replace(/\-/g, "\/"));
			var xtotalTime = (endDate.getTime()-startDate.getTime())/(1000*60*60);
			if(xtotalTime < 0)
			{
				alert('预约结束时间必须大于开始时间！');
				$("#totalTime").html("0小时");
				event.preventDefault();
				return false;
			}
			
			$("#hbeginDate").val(startDate.format('yyyy-MM-dd hh:mm:ss'));
			$("#hendDate").val(endDate.format('yyyy-MM-dd hh:mm:ss'));
			$("#hendcostType").val($("#costType").val());
			if($("#costType").val()==2)
			{
				$("#hendsampleCount").val($("#inputsampleCount").val());
			}
			
		}
		else
		{
			alert('请填写完整预约时间！');
			$("#totalTime").html("0小时");
			event.preventDefault();
			return false;
		}
		
		$("#reserveForm").submit();
		
	});	

});
</script>
</head>
<body onload="init('${(deviceInfo.id)!!}');" class="list">
	<div class="body">
			<div id="wyyy_content_left">
				<div class="Space">
					<dl id="wyyy_content_left_text">
						<dd id="wyyy_content_left_text_pic"><img src="${base}/devices/inventory/${(deviceInfo.ImageView)!"default.png"}"  width="220" height="220"></dd>
						<dt id="wyyy_content_left_text_tille"><span class="Blue_color" id="strong01">${deviceInfo.propertyName}</span></dt>
						<dd class="wyyy_content_left_text">资产编号：<span class="Blue_color">${(deviceInfo.classifyId)!"未描述"}</span></dd>
						<dd class="wyyy_content_left_text">分类名称：<span class="Blue_color">${(deviceInfo.classifyName)!"未描述"}</span></dd>
						<dd class="wyyy_content_left_text">共享模式：<span class="Blue_color"><#if deviceInfo != null&&deviceInfo.isShared == 1>共享<#elseif deviceInfo != null&&deviceInfo.isShared == 2>所内共享<#else>专用</#if></span></dd>
						<dd class="wyyy_content_left_text">存放地点：<span class="Blue_color">${(deviceInfo.location)!"未描述"}</span></dd>
						<dd class="wyyy_content_left_text">规格型号：<span class="Blue_color">${(deviceInfo.specificationType)!"未描述"}</span></dd>
						<dd class="wyyy_content_left_text">测定指标：<span class="Blue_color">${(deviceInfo.metric)!"未描述"}</span></dd>
						<dd class="wyyy_content_left_text">按时间测试费用：<span class="green_color"><span class="Blue_color">${(deviceInfo.timeCost)!"未描述"}元/小时</span></dd>
						<dd class="wyyy_content_left_text">按样品测试费用： <span class="green_color"><span class="Blue_color">${(deviceInfo.countCost)!"未描述"}元/个</span></dd>
					</dl>
				</div>
				<div class="extraitem">
                <div>
                                                            仪器使用部门：<span class="Blue_color extrapaddingright">${(deviceInfo.deviceDpt)!"未描述"}</span>
                	仪器使用人：<span class="Blue_color">${(deviceInfo.assetsUser)!"未描述"}</span>
                </div>
                <div>
					仪器管理部门：<span class="Blue_color extrapaddingright">${(deviceInfo.deviceMgrDpt)!"未描述"}</span>
					仪器管理人：<span class="Blue_color">${(deviceInfo.assetsAdmin)!"未描述"}</span>
                </div>                
                </div>
		    </div>
            <div id="book_content_right">
            	 <div class="Blue_color" id="wyyy_tille02">
						<img align="absmiddle" src="../../../apache/admin/images/wyyy02_07.jpg">
						<span id="strong01" class="font_size14">&nbsp;&nbsp;预约登记表</span>
			     </div>
                 
                 <div class="book_content" id="wyyy_content_left_text03">
					<div class="space_padding10" id="green_color">
                        <strong>温馨提示</strong>
                        <br/>(1)每次最多可预约&nbsp;<span class="red_color"><strong>15</strong></span>&nbsp;小时；
                          (2)每周最多可预约&nbsp;<span class="red_color"><strong>40</strong></span>&nbsp;小时；
                        (3)允许提前&nbsp;<span class="red_color"><strong>7</strong></span>&nbsp;天预约；
				    </div>
				
					<div id="contentn_yyrlb_tille_02"><a href="#" id="ex3aTrigger">查看预约人名单</a><img src="../../../apache/admin/images/wyyy02_11.jpg" align="absmiddle" /> 可预约时段&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../../apache/admin/images/wyyy02_13.jpg" align="absmiddle" /> 已预约&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../../apache/admin/images/wyyy02_15.jpg" align="absmiddle" /> 不开放时段</div>
				    
                    <div id="contentn_yyrlb_tille_03">
                        <div id="contentn_yyrlb_tille_03_all_contnent">
                              <!-- 预约日历表 -->
                        </div>
						<div class="text_align_right" id="showTime" style="padding-right: 16px;padding-top: 5px;"></div>
						  <script type="text/javascript">
										
						//异常处理
						function myexception(reply){
							$("#contentn_yyrlb_tille_03_all_contnent").html('<span class="red_color"><center><br/><br/><img src="../../../apache/admin/images/bad.png" vspace="0" align="absmiddle" /><br/>获取数据失败，请稍后再试！</center></span>');
						}
																			
						function appointmentCalendar(date,id){
							$("#contentn_yyrlb_tille_03_all_contnent").html('<center><br/><br/><img src="../../../apache/admin/images/ajax-loader.gif" vspace="0" align="absmiddle" /></center>');
							$.post("${base}/faith/reserve/appointmentTime", { date: date, id: id },function(pager){
								if(pager == null){
									$("#contentn_yyrlb_tille_03_all_contnent").html('<span class="red_color"><center><br/><br/><img src="../../../apache/admin/images/bad.png" vspace="0" align="absmiddle" /><br/>获取数据失败，请稍后再试！</center></span>');
									alert('获取数据失败，请稍后再试！');
									return;
								}
								
								var calendarData='';
								for(var i = 0;i < 4;i++){
									calendarData += '<div class=timegridline>'+
								'<div class=timegrid>'+
									 '<p style="background-image:url(../../../apache/admin/images/wyyy02_ruler.gif)">'+Number(0+6*i)+':00</p>'+
									 '<div class="border03_w">'+
										 '<div class="contentn_yyrlb_tille_03_content_left"><div class="'+pager.back[Number(0+6*i)]+'"></div></div>'+
									 '</div>'+
								'</div>'+
								'<div class=timegrid>'+
									 '<p style="background-image:url(../../../apache/admin/images/wyyy02_ruler.gif)">'+Number(1+6*i)+':00</p>'+
									 '<div class="border03_w">'+
										  '<div class="contentn_yyrlb_tille_03_content_left"><div class="'+pager.back[Number(1+6*i)]+'"></div></div>'+
									 '</div>'+
								'</div>'+
								'<div class=timegrid>'+
									 '<p style="background-image:url(../../../apache/admin/images/wyyy02_ruler.gif)">'+Number(2+6*i)+':00</p>'+
									 '<div class="border03_w">'+
										   '<div class="contentn_yyrlb_tille_03_content_left"><div class="'+pager.back[Number(2+6*i)]+'"></div></div>'+
									 '</div>'+
								 '</div>'+
								 '<div class=timegrid>'+
									 '<p style="background-image:url(../../../apache/admin/images/wyyy02_ruler.gif)">'+Number(3+6*i)+':00</p>'+
									 '<div class="border03_w">'+
									      '<div class="contentn_yyrlb_tille_03_content_left"><div class="'+pager.back[Number(3+6*i)]+'"></div></div>'+
									 '</div>'+
								 '</div>'+
								 '<div class=timegrid>'+
									 '<p style="background-image:url(../../../apache/admin/images/wyyy02_ruler.gif)">'+Number(4+6*i)+':00</p>'+
									 '<div class="border03_w">'+
										 '<div class="contentn_yyrlb_tille_03_content_left"><div class="'+pager.back[Number(4+6*i)]+'"></div></div>'+
									 '</div>'+
								 '</div>'+
								 '<div class=timegrid>'+
									 '<p style="background-image:url(../../../apache/admin/images/wyyy02_ruler0.gif)">'+Number(5+6*i)+':00</p>'+
									 '<div class="border03_w">'+
										 '<div class="contentn_yyrlb_tille_03_content_left"><div class="'+pager.back[Number(5+6*i)]+'"></div></div>'+
									 '</div>'+
								 '</div>'+
								'</div>';
									if(i != 3){
									  calendarData += '<div style="height:5px;"></div>';
									 }
								}
								calendarData = '<div id="contentn_yyrlb_tille_03_content">'+calendarData+'</div>';
								$("#contentn_yyrlb_tille_03_all_contnent").html(calendarData);
								<#--弹出框start-->
								var popupData='';
								if(pager.members.length>0)
								$(pager.members).each(function (index, domEle) {
									if(index==pager.members.length)
									{
										popupData+='<div class="row grid_rw1clr lastrow">'+
										  '<div class="rowcell">'+domEle.username+'</div>'+
										  '<div class="rowcell">'+domEle.realName+'</div>'+
										  '<div class="rowcell">'+domEle.email+'</div>'+
										  '<div class="rowcell">'+domEle.telephone+'</div>'+
										  '<div class="rowtimecell">'+domEle.beginDate+'</div>'+
										  '<div class="rowtimecell lastcell">'+domEle.endDate+'</div></div>'
									}
									else
									{
										popupData+='<div class="row grid_rw1clr">'+
											  '<div class="rowcell">'+domEle.username+'</div>'+
											  '<div class="rowcell">'+domEle.realName+'</div>'+
											  '<div class="rowcell">'+domEle.email+'</div>'+
											  '<div class="rowcell">'+domEle.telephone+'</div>'+
											  '<div class="rowtimecell">'+domEle.beginDate+'</div>'+
											  '<div class="rowtimecell lastcell">'+domEle.endDate+'</div></div>'
									}
								});
								$("#refreshme").html(popupData);
								<#--弹出框 end-->
							});
							
							
						}
											
											
						WdatePicker({eCont:'showTime',onpicked:function(dp)
							{
								appointmentCalendar(dp.cal.getDateStr('yyyy-MM-dd 00:00:00'),'${(deviceInfo.id)!!}');
							}
						});
		      </script>
					 </div>
			
			     <div class="timeselectbox">
                    <span class="text_align_right">开始时间：</span>
					<input name="startDate" id="yystartDate" onPropertyChange="account()" onFocus="WdatePicker({minDate:'${minDate}',maxDate:'${maxDate}',dateFmt:'yyyy-MM-dd'})"  readonly="readonly" type="text"  class="input_border" size="12" />
								  <select class="input_border" style="width:45px;height: 20px;padding-top: 2px;" name="yystartHour" id="yystartHour">
								  	<option value="00">00</option>
								  	<option value="01">01</option>
								  	<option value="02">02</option>
								  	<option value="03">03</option>
								  	<option value="04">04</option>
								  	<option value="05">05</option>
								  	<option value="06">06</option>
								  	<option value="07">07</option>
								  	<option value="08">08</option>
								  	<option value="09">09</option>
								  	<option value="10">10</option>
								  	<option value="11">11</option>
								  	<option value="12">12</option>
								  	<option value="13">13</option>
								  	<option value="14">14</option>
								  	<option value="15">15</option>
								  	<option value="16">16</option>
								  	<option value="17">17</option>
								  	<option value="18">18</option>
								  	<option value="19">19</option>
								  	<option value="20">20</option>
								  	<option value="21">21</option>
								  	<option value="22">22</option>
								  	<option value="23">23</option>
								  </select> 时(整点开始，如2012-07-13 08:00:00)
						 </div>
                              
						 <div class="timeselectboxbt">
							<span class="text_align_right">结束时间：</span>
							<span>
							  	<input name="endDate" id="yyendDate" onFocus="WdatePicker({minDate:'${minDate}',maxDate:'${maxDate}',dateFmt:'yyyy-MM-dd'})" onchange="account();" readonly="readonly" type="text"  class="input_border" size="12" />
							  <select class="input_border" style="width:45px;height: 20px;padding-top: 2px;" name="yyendHour" id="yyendHour">
							  	<option value="00">00</option>
							  	<option value="01">01</option>
							  	<option value="02">02</option>
							  	<option value="03">03</option>
							  	<option value="04">04</option>
							  	<option value="05">05</option>
							  	<option value="06">06</option>
							  	<option value="07">07</option>
							  	<option value="08">08</option>
							  	<option value="09">09</option>
							  	<option value="10">10</option>
							  	<option value="11">11</option>
							  	<option value="12">12</option>
							  	<option value="13">13</option>
							  	<option value="14">14</option>
							  	<option value="15">15</option>
							  	<option value="16">16</option>
							  	<option value="17">17</option>
							  	<option value="18">18</option>
							  	<option value="19">19</option>
							  	<option value="20">20</option>
							  	<option value="21">21</option>
							  	<option value="22">22</option>
							  	<option value="23">23</option>
							  </select> 时(如与开始时间相同，既为开始时的一个小时)
							</span>
				        </div>
						<div class="timeselectboxbt">
							<span class="text_align_right">结算方式：</span>
							<span>
							  <select class="input_border" id="costType" style="height: 20px;padding-top: 2px;">
 								<option value="1">按时间计费</option>
					    		<option value="2">按样品数量计费</option>
							  </select>&nbsp;&nbsp;
							  <span style="display: none;" id="sampleCount"><input id="inputsampleCount" class="input_border" name="sampleCount"/>个样品</span>
							</span>
				        </div>
					    <div class="timeselectboxbt">
							<span class="text_align_right">预计总时长：</span>
							<span id="totalTime">0小时</span>
						</div>
						<div class="timeselectboxbt">
							<span class="text_align_right">预计费用：</span>
							<span id="totalMoney">0元</span>
						</div>
						
							<div class="Space">
								<div class="padding5px">
								<form id="reserveForm" action="${base}/faith/reserve/reserve" method="post">
									<input type="hidden" id="deviceId" name="device.id" value="${deviceInfo.id}" />
									<input type="hidden" id="hbeginDate" name="beginDate" />
									<input type="hidden" id="hendDate" name="endDate" />
									<input type="hidden" id="hendcostType" name="costType" />
									<input type="hidden" id="hendsampleCount" name="sampleCount" />
									
									<input type="hidden" id="costbytime"  value="${(deviceInfo.timeCost)!0}" />
									<input type="hidden" id="costbycount"  value="${(deviceInfo.countCost)!0}" />

									<input type="button" value=""  id="wyyy_content_left_text03_reset" style="cursor: pointer;">
								</form>
								</div>
							</div>
			
					</div><!--右侧-->
                    
                    
            </div>
        
        
        
	</div>
	
<div id="dialog" class="jqmDialog">
<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">已预约该仪器的人员名单</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC">

<div class="table">
<div class="tableheader"><div>预约人帐号</div><div>仪预约人姓名</div><div>预约人email</div><div>预约人电话</div><div class="headertime">预约开始时间</div><div class="headertime lastcell">预约结束时间</div></div>
<div id="refreshme">


<div class="row grid_rw1clr lastrow">
     <div class="rowcell">feifei</div>
     <div class="rowcell">薛永飞</div>
     <div class="rowcell">faithbj@163.com</div>
     <div class="rowcell">15810100105</div>
     <div class="rowtimecell">10点</div>
     <div class="rowtimecell lastcell">11点</div>
</div>
</div>



</div>
</div></div></div>
<input type="image" src="dialog/close.gif" class="jqmdX jqmClose" />
</div>
</body>
</html>